
export default {
  bind(el, binding, vnode, oldVnode) {
    console.log('m3', '===========>')
    el.style.cursor = 'move'
  },
  inserted(el, options) {
    el.onmousedown = (e) => {
      // 要拖动的是父级div
      const moveElement = el.parentElement

      const distX = e.pageX - moveElement.offsetLeft
      const distY = e.pageY - moveElement.offsetTop
      const bodyWidth = document.body.clientWidth
      const bodyHeight = document.body.clientHeight
      const targetWidth = moveElement.clientWidth
      const targetHeight = moveElement.clientHeight

      if (e.preventDefault) {
        e.preventDefault()
      } else {
        e.returnValue = false
      }

      document.onmousemove = (e) => {
        let left = e.clientX - distX
        let top = e.clientY - distY

        if (left <= 0) {
          left = 10
        } else if (left >= bodyWidth - targetWidth) {
          left = bodyWidth - targetWidth - 10
        }

        if (top <= 0) {
          top = 10
        } else if (top > bodyHeight - targetHeight) {
          top = bodyHeight - targetHeight - 10
        }

        moveElement.style.left = `${left}px`
        moveElement.style.top = `${top}px`
      }

      document.onmouseup = () => {
        document.onmouseup = document.onmousemove = null
      }
    }
  }
}
